<template>
	<view>
		<view v-if="!show">
			<view class="content" v-if="showHeader"
				style="position: fixed;top: 0;left: 0;z-index: 777;width: 100%;height: 100vh;background-color: #FFFFFF;">
				<camera :binderror="handleCameraError" :device-position="devicePosition" flash="off"
					class="PictureWord_mb">
					<cover-image v-if="!!mbImg" class="PictureWord_mb_img" :src="mbImg"></cover-image>
				</camera>
				<view class="btns" style="width: 100%;height: 30vh;background: #3B4144;">
					<image class="item_t" @tap="chooseImage"
						src="https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/rtt/icon/tk.png"></image>
					<image class="item_x" @tap="takePhotoByHead"
						src="https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/rtt/icon/pzbtn.png"></image>
					<image class="item_f" @tap="reverseCamera"
						src="https://iflytts.oss-cn-qingdao.aliyuncs.com/wxapp/rtt/icon/fz.png"></image>
				</view>
			</view>
		</view>
		<l-clipper ref="clipper" v-if="show" :image-url="imageUrl" :isLockRatio="isLockRatio"
			:isShowPhotoBtn="isShowPhotoBtn" :maxWidth="maxWidth" :maxHeight="maxHeight" :width="width" :height="height"
			@success="
				url = $event.url;
				show = false;
			" @cancel="show = false" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				authCamera: false,
				showHeader: true,
				ctxHeader: null,
				devicePosition: 'back',
				mbImg: '',
				imageUrl: 'https://img12.360buyimg.com/pop/s1180x940_jfs/t1/97205/26/1142/87801/5dbac55aEf795d962/48a4d7a63ff80b8b.jpg',
				show: false,
				url: '',
				isLockRatio: false,
				isShowPhotoBtn: false,
				maxWidth: 1000,
				maxHeight: 1500,
				width: 750,
				height: 750,
				beforePage: ''
			};
		},
		onShow() {
			this.getCamera();
		},
		onReady() {

		},
		onLoad() {
			 
		},
		watch: {
			showHeader(val) {
				console.log(val);
				return;
				var that = this;
				//获取相机权限
				uni.getSetting({
					success(res) {
						console.log('相机权限:', res);
						if (res.authSetting['scope.camera']) {
							that.authCamera = true;
						} else {
							that.authCamera = false;
						}
					}
				});
			},
			url(val) {
				console.log(this.url, 'this.url');
				uni.setStorageSync('set_photo', this.url);
				uni.redirectTo({
					url: '/pages_aiTools/localVideo/localVideo'
				});
			}
		},
		onUnload() {},
		methods: {
			getCamera() {
				var that = this;
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.camera']) {
							console.log('第一次录音授权失败');
							wx.showModal({
								title: '提示',
								content: '您未授权相机，功能将无法使用',
								showCancel: true,
								confirmText: '授权',
								confirmColor: '#52a2d8',
								success: function(res) {
									if (res.confirm) {
										//确认则打开设置页面（重点）
										wx.openSetting({
											success: res => {
												console.log(res.authSetting);
												if (!res.authSetting['scope.camera']) {
													//未设置相机授权
													console.log('未设置相机授权');
													wx.showModal({
														title: '提示',
														content: '您未授权相机，功能将无法使用',
														showCancel: false,
														success: function(res) {}
													});
												} else {
													//第二次才成功授权
													console.log('设置相机授权成功');
												}
											},
											fail: function() {
												console.log('授权设置相机失败');
											}
										});
									} else if (res.cancel) {
										console.log('cancel');
									}
								},
								fail: function() {
									console.log('openfail');
								}
							});
						} else {
							console.log('授权成功');
						}
					}
				});
			},
			chooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						console.log(res, '图库选择');
						this.show = true;
						this.imageUrl = res.tempFilePaths[0];
					}
				});
			},
			//拍摄头像
			takePhotoByHead() {
				this.showHeader = true; //开启拍照
				this.ctxHeader = uni.createCameraContext();
				this.ctxHeader.takePhoto({
					quality: 'high',
					success: res => {
						console.log(res);
						uni.compressImage({
							src: res.tempImagePath,
							quality: 90, //压缩比例
							success: ress => {
								this.show = true;
								this.imageUrl = ress.tempFilePath;
							}
						});
					}
				});
			},
			handleCameraError() {
				uni.showToast({
					title: '用户拒绝使用摄像头',
					icon: 'none'
				});
			},
			reverseCamera() {
				this.devicePosition = 'back' === this.devicePosition ? 'front' : 'back';
			}
		}
	};
</script>

<style lang="scss" scoped>
	.PictureWord_mb {
		width: 100%;
		height: 70vh;

		.PictureWord_mb_img {
			width: 632rpx;
			height: 383rpx;
			margin-top: 200rpx;
			margin-left: 63rpx;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #fff;
		box-sizing: border-box;
		height: 100%;
		width: 100vw;

		.btns {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.item_x {
				width: 110rpx;
				height: 110rpx;
			}

			.item_t,
			.item_f {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>